// 路由组件
import React, { Component } from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'
// import Login from '../Login'
// import Reg from '../Reg'
// import Transition1 from '../Transition1.js'
// import NotFound from '../NotFound.js'
// import Layout from '../Layout.js'
// import Params from '../Params.js'
// import List from '../List.js'
// import Detail from '../Detail.js'
const Login = React.lazy(()=> import ('../Login'))
const Reg = React.lazy(()=> import ('../Reg'))
const Transition1 = React.lazy(()=> import ('../Transition1'))
const NotFound = React.lazy(()=> import ('../NotFound'))
const Layout = React.lazy(()=> import ('../Layout'))
const Params = React.lazy(()=> import ('../Params'))
const List = React.lazy(()=> import ('../List'))
const Detail = React.lazy(()=> import ('../Detail'))
const Http = React.lazy(()=> import ('../Http'))
const Redux = React.lazy(()=> import ('../Redux'))
const Redux2 = React.lazy(()=> import ('../Redux2'))

export default class Router extends Component {
  render() {
    return (
      <div>
        <React.Suspense fallback={<h1>loading...</h1>}>
        <Switch>
          {/* 地址匹配的方式：从上到下从左到右 */}
          {/* exact:严格匹配。页面地址必须完相等，而不是包含 */}
          {/* strict: 验证地址末位的‘/’是否存在，一般不写 */}
          {/* /layout/pagea 包含  /layout */}
          <Route path="/layout" component={Layout}>
          </Route>
          {/* 路由守卫，通过render属性对应的函数渲染组件，删掉component属性 */}
          <Route path="/login" render={
            () => {
              console.log(555);
              document.title='login66'
              let com = <Login></Login>
              return com
            }
          }></Route>
          <Route path="/reg" component={Reg}></Route>
          <Route path="/transition1" component={Transition1}></Route>
          <Route path="/params" component={Params}></Route>
          <Route path="/list" component={List}></Route>
          <Route path="/detail/:name" component={Detail}></Route>
          <Route path="/http" component={Http}></Route>
          <Route path="/redux" component={Redux}></Route>
          <Route path="/redux2" component={Redux2}></Route>
          {/* 普通的地址放在前面，*通配符放最后 */}
          {/* path="*"可以省略，表示匹配所有项 */}
          {/* <Route path="*" component={NotFound}></Route>  第一种 */}
          <Route path="/404" component={NotFound}></Route>
          <Redirect path="*" to="/404"></Redirect>
        </Switch>
        </React.Suspense>
      </div>
    )
  }
}
